<template>
  <div class="member-evaluate-page">
    <!-- tabs组件 -->
    <Tabs v-model="activeName" @tab-click="tabClick">
      <TabsPanel
        v-for="item in evaluateStatus"
        :key="item.name"
        :label="item.label"
        :name="item.name"
      >
      </TabsPanel>
    </Tabs>
  </div>
  <!-- 订单列表 -->
    <div class="order-list">
      <div v-if="loading" class="loading"></div>
      <div class="none" v-if="!loading && orderList.length === 0">暂无数据</div>
      <OrderItem 
        v-for="item in orderList" 
        :key="item.id" 
        :order="item" 
      />
    </div>
    <Pagination
      v-if="total > reqParams.pageSize"
      @current-change="reqParams.page=$event"
      :total="total"
      :page-size="reqParams.pageSize"
      :current-page="reqParams.page" 
    />
</template>
<script setup>
import { evaluateStatus } from '@/api/constants'
import Tabs from '@/components/tabs'
import TabsPanel from '@/components/tabs-panel'
import { ref, reactive, watch } from 'vue'
import Pagination from '@/components/pagination'
import { findOrderList  } from '@/api/order'
import OrderItem from '../order/order-item'
  const activeName = ref('comment')
  // 筛选条件
  const reqParams = reactive({
    page: 1,
    pageSize: 5,
    orderState: 0
  })
  const orderList = ref([])
  const loading = ref(false)
  const total = ref(0)

  const getOrderList = () => {
    loading.value = true
    findOrderList(reqParams).then(data => {
      orderList.value = data.result.items
      total.value = data.result.counts
      loading.value = false
    })
  }
  // 筛选条件变化重新加载
  watch(reqParams, () => {
    getOrderList()
  }, { immediate: true })
  // 点击选项卡
  const tabClick = ({ index }) => {
    reqParams.page = 1
    reqParams.orderState = index
  }
</script>
<style scoped lang="less">

</style>